<template>
	<view>
		<nav-bar   fontColor="#FFFFFF" title="自动放款融资申请"></nav-bar>

		<uni-card :is-shadow="true" title="自动放款融资申请">
			<v-tabs v-model="activeTab" @change="changeTb" :scroll="false" :bold="true" :tabs="tabs1"
				field="name"></v-tabs>
			<view class="content-margin">任务编号：J49667836314849</view>
			<view class="content-margin">申请人：<span style="color: #3B5DE0;">济南市天桥区鲁康名饮百货超市</span></view>
			<view class="content-margin">申请时间：2023-07-03 10:01:08</view>
		</uni-card>
		<uni-card :is-shadow="true" mode="card">
			<image src="../../static/icon/clock.png" class="img"></image>
			<view class="top-title">待审批</view>
			<view class="top-title1">当前任务处于【财务审批】节点， 【 admin/123 】正在进行审批</view>
		</uni-card>
		<view style="width: 90%;margin: 0 auto;">
			<qiun-title-bar title="融资需求" />
		</view>
		<uni-card :is-shadow="true" title="酒新贷" sub-title="四川新网银行股份有限公司" extra="采易融">
			<view class="content-margin">融资编号：J33212387424692</view>
			<view class="content-margin">融资金额：10.00万元</view>
			<view class="content-margin">借款期限：3个月</view>
			<view class="content-margin">借款用途：购买酒水</view>
		</uni-card>

		<uni-card>
			<uni-collapse>
				<uni-collapse-item title="交易信息" :show-animation="true">
					<zb-table :columns="column0" :stripe="true" :fit="true" show-summary sum-text="总价"
						:data="dataList0"></zb-table>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<uni-card>
			<uni-collapse>
				<uni-collapse-item title="还款试算 | 日利率0.014%（年化利率5.05%）" :show-animation="true">
					<view style="color: #a2a2a2;font-size: 25rpx;">资方费用 | 日利率0.014%（年化利率5.00%）</view>
					<view style="color: #a2a2a2;font-size: 25rpx;margin: 10rpx 0;">计费方式：等额本息</view>
					<zb-table :columns="column1" :stripe="true" :fit="true" show-summary sum-text="总计"
						:data="dataList1"></zb-table>
					<!-- <view style="color: #797979;font-size: 25rpx;margin: 20rpx 0;font-weight: bold;">平台费用</view> -->
					<view style="color: #a2a2a2;font-size: 25rpx;margin: 20rpx 0">以上仅为试算结果，以实际放款为准～</view>
					<!-- <view style="color: #040404;font-size: 30rpx;margin: 20rpx 0;font-weight: bold;">应还总额：￥10.09</view> -->
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<uni-card>
			<uni-collapse>
				<uni-collapse-item title="合同签署" :show-animation="true">
					<zb-table :columns="column3" :stripe="true" :fit="true"
						:data="dataList3"></zb-table>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<uni-card>
			<uni-collapse>
				<uni-collapse-item title="缴纳费用" :show-animation="true">
					<zb-table :columns="column2" :stripe="true" :fit="true" show-summary sum-text="总价"
						:data="dataList2"></zb-table>
					<view style="color: #797979;font-size: 25rpx;margin: 20rpx 0;font-weight: bold;">订单状态：待付款</view>
					<button style="margin-left: 55%;" type="primary" size="mini">查看支付凭证图片</button>
				</uni-collapse-item>
			</uni-collapse>
		</uni-card>
		<view style="height: 60rpx;">
			<view class="bottomBox">
				<view class="buttonBox">
					<button class="button_fix mainColor" 
						size="default" type="primary">通过</button>
					<button class="button_fix" type="warn" size="default">驳回</button>
					<button class="button_fix" type="warn"  size="default">终止</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeTab: 0,
				tbStatus: 0,
				tabs1: [{
						name: '申请信息',
						value: 1
					},
					{
						name: '流转信息',
						value: 2
					},
					{
						name: '流程跟踪',
						value: 1
					}
				],
				column0: [{
						type: 'index',
						label: '#',
						align: 'center'
					},
					{
						name: 'htbh',
						label: '合同编号',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'mybj',
						label: '贸易背景',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'pzlx',
						label: '凭证类型',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'dqrq',
						label: '到期日期',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'bcdkje',
						label: '本次贷款金额（元）',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList0: [{
					htbh: 'J323869099725878',
					mybj: '济南市天桥区鲁康名饮百货超市',
					pzlx: '采购订单',
					dqrq: '2023-07-27',
					bcdkje: '10.00'
				}],
				column1: [{
						type: 'index',
						label: '期数',
						align: 'center'
					},
					{
						name: 'backDate',
						label: '还款日期',

						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'total',
						label: '应还总额',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'benjin',
						label: '还款本金',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'lixi',
						label: '应还利息',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList1: [{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '0.04',
					},
					{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '0.04',
					},
					{
						backDate: '2023-08-03',
						total: '3.36',
						benjin: '3.32',
						lixi: '￥0.04',
					}
				],
				column2: [{
						name: 'fymc',
						label: '费用名称',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'fylx',
						label: '费用类型',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'zfjd',
						label: '支付节点',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'jffs',
						label: '计费方式',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'yfje',
						label: '应付金额',
						emptyString: '暂无数据',
						align: 'center'
					}
				],
				dataList2: [{
					fymc: '服务费',
					fylx: '服务费',
					zfjd: '融资申请',
					jffs: '借款本金x服务费率',
					yfje: '0.01'
				}],
				column3: [{
						type: 'index',
						label: '序号',
						align: 'center'
					},
					{
						name: 'htbh',
						label: '合同编号',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'htbt',
						label: '合同标题',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'cjsj',
						label: '创建时间',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'qszt',
						label: '签署状态',
						emptyString: '暂无数据',
						align: 'center'
					},
					{
						name: 'operation',
						type: 'operation',
						label: '操作',
						align: 'center',
						renders: [{
							name: '查看',
							// type: 'warn', // type 为custom的时候自定义按钮
							func: "detail"
						}]
					},
				],
				dataList3: []
			}
		},
		methods: {
			changeTb(e) {
				this.tbStatus = e;
				console.log(e)
			},
		}
	}
</script>

<style>
	.img {
		width: 100rpx;
		height: 100rpx;
		margin: 0 auto;
	}

	.top-title {
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		margin: 10rpx;
	}

	.top-title1 {
		text-align: center;
		font-size: 28rpx;
		font-weight: bold;
		margin: 10rpx;
	}

	.content-margin {
		margin: 20rpx 0;
	}
	.bottomBox {
		position: fixed;
		width: 100%;
		bottom: 0;
		margin-bottom: 20rpx;
		
	}
	
	.buttonBox {
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-around;
	
		// margin-top: 200rpx;
	}
	
	.button_fix {
		width: 25%;
		height: 70rpx;
		// margin: 0 auto;
		color: #FFFFFF;
		/* background: #2749C8; */
		font-weight: bold;
		letter-spacing: 5rpx;
		font-size: 28rpx;
		line-height: 70rpx;
	
	}
	.mainColor{
		background: #2749C8;
	}
</style>